@floating-ui/react-dom

Positioning Tooltips

This code demonstrates how to create a simple tooltip that appears above a button when clicked. It uses the useFloating hook from @floating-ui/react-dom to manage the tooltip's position and behavior, including automatic adjustment for viewport boundaries.

import { useFloating, offset, flip, shift, arrow } from '@floating-ui/react-dom';
import { useState, useRef } from 'react';

function Tooltip() {
  const [open, setOpen] = useState(false);
  const arrowRef = useRef(null);
  const {x, y, reference, floating, strategy} = useFloating({
    placement: 'top',
    middleware: [offset(5), flip(), shift({padding: 5}), arrow({element: arrowRef})]
  });

  return (
    <>
      <button ref={reference} onClick={() => setOpen(!open)}>
        Hover me
      </button>
      {open && (
        <div ref={floating} style={{position: strategy, top: y ?? '', left: x ?? ''}}>
          Tooltip content
          <div ref={arrowRef} />
        </div>
      )}
    </>
  );
}

Creating Popovers

This example shows how to create a popover that appears to the right of a button when clicked. The useFloating hook is used to handle dynamic positioning and flipping to ensure the popover remains visible within the viewport.

import { useFloating, offset, flip, shift } from '@floating-ui/react-dom';
import { useState, useRef } from 'react';

function Popover() {
  const [open, setOpen] = useState(false);
  const {x, y, reference, floating, strategy} = useFloating({
    placement: 'right-start',
    middleware: [offset(10), flip(), shift({padding: 8})]
  });

  return (
    <>
      <button ref={reference} onClick={() => setOpen(!open)}>
        Click me
      </button>
      {open && (
        <div ref={floating} style={{position: strategy, top: y ?? '', left: x ?? ''}}>
          Popover content
        </div>
      )}
    </>
  );
}